<template>
  <require from="./conditional-event.css"></require>
  <require from="../../../../styles/sections.css"></require>
  <div class="section-panel" id="js-general-conditionalEvent-section">
    <div class="panel__heading">
      Conditional Event
    </div>
    <div class="panel__content">
      <table class="props-table">
        <tr>
          <th>Condition</th>
          <td>
            <input type="text" class="props-input" value.bind="conditionBody" change.delegate="updateCondition()" disabled.bind="!isEditable">
          </td>
        </tr>
        <tr>
          <th>Variable Name</th>
          <td>
            <input type="text" class="props-input" value.bind="variableName" change.delegate="updateVariableName()" disabled.bind="!isEditable">
          </td>
        </tr>
        <tr>
          <th>Variable Event</th>
          <td>
            <input type="text" class="props-input" value.bind="variableEvent" change.delegate="updateVariableEvent()" disabled.bind="!isEditable">
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
